<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
  </head>
  
  <body>
    <div class="main-content">
    	<!-- 导航 -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>

			<ul class="breadcrumb">
				<li>
					<i class="icon-home home-icon"></i>
					<a href="#">Home</a>
				</li>

				<li>
					<a href="#">Tables</a>
				</li>
				<li class="active">Simple &amp; Dynamic</li>
			</ul><!-- .breadcrumb -->

			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon">
						<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
						<i class="icon-search nav-search-icon"></i>
					</span>
				</form>
			</div><!-- #nav-search -->
		</div>
		<!-- 部门树 -->
		<div class="page-content">
				<div class="btn-group">
				  <button type="button" class="btn btn-success" style="margin-right:10px;" href="#modal-form" role="button" class="blue" data-toggle="modal" >新增</button>
				  <button type="button" class="btn btn-info" style="margin-right:10px;" onclick="editDept();" >编辑</button>
				  <button type="button" class="btn btn-warning" style="margin-right:10px;" onclick="getDept();" >查看</button>
				  <button type="button" class="btn btn-danger" style="margin-right:10px;" onclick="delDept();" >删除</button>
				</div>
			<div class="row">
				<div class="col-xs-8">
					<!-- PAGE CONTENT BEGINS -->
	
					<div class="widget-box">
						<div class="widget-header header-color-blue2">
							<h4 class="lighter smaller">部门树</h4>
						</div>

						<div class="widget-body">
							<div class="widget-main padding-8">
								<div id="deptTree" class="tree"></div>
							</div>
						</div>
					</div>

					<script type="text/javascript">
						var $assets = "assets";//this will be used in fuelux.tree-sampledata.js
					</script>

					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
  	</div>
  	<!-- 弹出新增的模态框 -->
  	<div id="modal-form" class="modal" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="blue bigger">Please fill the following form fields</h4>
				</div>
	
				<div class="modal-body overflow-visible">
					<div class="row">
						<div class="col-xs-12 col-sm-5">
							<div class="space"></div>
	
							<input type="file" />
						</div>
	
						<div class="col-xs-12 col-sm-7">
							<div class="form-group">
								<label for="form-field-select-3">Location</label>
	
								<div>
									<select class="chosen-select" data-placeholder="Choose a Country...">
										<option value="">&nbsp;</option>
										<option value="AL">Alabama</option>
										<option value="AK">Alaska</option>
									</select>
								</div>
							</div>
	
							<div class="space-4"></div>
	
							<div class="form-group">
								<label for="form-field-username">Username</label>
	
								<div>
									<input class="input-large" type="text" id="form-field-username" placeholder="Username" value="alexdoe" />
								</div>
							</div>
	
							<div class="space-4"></div>
	
							<div class="form-group">
								<label for="form-field-first">Name</label>
	
								<div>
									<input class="input-medium" type="text" id="form-field-first" placeholder="First Name" value="Alex" />
									<input class="input-medium" type="text" id="form-field-last" placeholder="Last Name" value="Doe" />
								</div>
							</div>
						</div>
					</div>
				</div>
	
				<div class="modal-footer">
					<button class="btn btn-sm" data-dismiss="modal">
						<i class="icon-remove"></i>
						Cancel
					</button>
	
					<button class="btn btn-sm btn-primary">
						<i class="icon-ok"></i>
						Save
					</button>
				</div>
			</div>
		</div>
	</div><!-- PAGE CONTENT ENDS -->
  	<script src="assets/js/fuelux/data/fuelux.tree-sampledata.js"></script>
	<script src="assets/js/fuelux/fuelux.tree.min.js"></script>
	<script src="js/department.js"></script>
  </body>
</html>
